<template>
	<view class="page">
		<view class="sh-background">
			<view class="sh-background-item">
				<image src="//image2.suning.cn/uimg/cms/img/160413575616818628.png" alt="" />
				<!-- <image v-else src="//image2.suning.cn/uimg/cms/img/160576734810087520.png" alt="" /> -->
			</view>
		</view>
		<view class="page-tip">
			<!-- <tui-icon name="attestation" color="#fff" size="40" unit="rpx"></tui-icon> -->
			<view class="page-tip-title">点击开始农场游戏</view>
			<!-- <view class="page-tip-button huxi">立即抽奖</view> -->
		</view>
		<view class="tui-banner-box">
			<swiper class="tui-banner-swiper">
				<swiper-item>
					<image
						@click="navToFarm"
						src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607518700300&di=2aafb4bfb5a33bed3a4d6d7c041cc8fe&imgtype=0&src=http%3A%2F%2Fimage.gimmgimm.com%2Fu%2F32598%2Fc879af58cd0b0aa68a787af2dc5defa2.jpg"
						class="tui-slide-image"
						mode="scaleToFill"
					/>
				</swiper-item>
				<!-- <swiper-item><image src="//image1.suning.cn/uimg/cms/img/160515037648981455.png" class="tui-slide-image" mode="scaleToFill" /></swiper-item> -->
			</swiper>
		</view>
		<view v-if="integralList.length" style="margin-top: 30px;" class="more-top">
			<view class="more-top-title">
				<view class="more-top-color"></view>
				积分抽奖
			</view>
			<view @click="handleMore" class="more-top-more">更多>></view>
		</view>

		<view class="coupon-list">
			<view v-if="index < 2" class="coupon-item" v-for="(item, index) in integralList" :key="index">
				<view class="coupon">
					<image src="/static/images/index/img_fuwuquan_blue_3x.png" class="coupon-img"></image>

					<image src="/static/icons/spinWin.png" class="coupon-img-icon"></image>

					<view class="left-tit-box">
						<view class="tit">{{ item.spinWinName }}</view>
						<view class="term">转盘所需积分：{{ item.spinWinNeedIntegral }}</view>
					</view>
					<view class="right-detail" @tap="spread(item)">
						<text class="detail-txt huxi">立即抽奖</text>
						<image src="/static/images/index/icon_next_3x.png" class="arrow huxi"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="raffleTicketList.length" class="more-top">
			<view class="more-top-title">
				<view class="more-top-color"></view>
				星级抽奖
			</view>
			<view @click="handleMore" class="more-top-more">更多>></view>
		</view>

		<view class="coupon-list">
			<view v-if="index < 2" class="coupon-item" v-for="(item, index) in raffleTicketList" :key="index">
				<view class="coupon">
					<image src="/static/images/index/img_fuwuquan_pink_3x.png" class="coupon-img"></image>

					<image src="/static/icons/spinWin1.png" class="coupon-img-icon"></image>
					<view class="left-tit-box">
						<view class="tit">{{ item.spinWinName }}</view>
						<view class="term">转盘：{{ item.raffleTicketName }}</view>
					</view>
					<view class="right-detail" @tap="spread(item)">
						<text class="detail-txt huxi">立即抽奖</text>
						<image src="/static/images/index/icon_next_3x.png" class="arrow huxi"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import fusionSdk from '@/libs/fusionAd.js';
import { spinWinList } from '@/service/spinwin.js';
export default {
	data() {
		return {
			banner: ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'],
			current: 0,
			navbar: [
				{
					name: '大转盘'
				},
				{
					name: '我的农场'
				}
			],
			integralList: [],
			raffleTicketList: []
		};
	},
	onLoad() {
		this.spinWinList();
		this.getRaffleTicketList();
		// spinWinAccountDetail();
	},
	// onReady() {
	// 	this.$loadInterstitialAd();
	// },
	methods: {
		handleMore() {
			uni.navigateTo({
				url: 'turntable/list/list'
			});
		},
		navToFarm() {
			// this.$msg('功能开发中')
			uni.navigateTo({
				url: '/pages/game/farm/index'
			});
		},
		async spinWinList() {
			this.integralList = await spinWinList({ spinWinType: 'integral' });
		},
		async getRaffleTicketList() {
			this.raffleTicketList = await spinWinList({ spinWinType: 'raffleTicket' });
		},
		handleSwiperChange({ target: { current } }) {
			this.current = current;
		},
		change(e) {
			this.currentTab = e.index;
		},
		spread(item) {
			uni.navigateTo(
				{
					url: '/pages/game/turntable/index'
				},
				{
					...item
				}
			);
		}
	}
};
</script>

<style lang="scss" scoped>
.sh-background-item {
	image {
		width: 750upx;
	}
}

.tui-banner-box {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: absolute;
	/* overflow: hidden; */
	z-index: 99;
	margin-top: -300rpx;
}

.tui-banner-swiper {
	width: 100%;
	height: 340rpx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateY(0);
}

.tui-slide-image {
	width: 100%;
	height: 340rpx;
	display: block;
}
.page-tip {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: absolute;
	/* overflow: hidden; */
	z-index: 1000;
	display: flex;
	margin-top: -380upx;
	align-items: center;
}
.page-tip-title {
	margin-left: 10upx;
	color: #fff;
	font-size: 28upx;
}
.page-tip-button {
	padding: 10upx 20upx;
	font-size: 16upx;
	margin-left: 20upx;
	border-radius: 44px;
	box-shadow: 0 10px 20px rgba(85, 85, 255, 0.3);
	background: $gradient-bg;
	background: $gradient-bg;
	color: #fff;
}
.more-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 30upx;
}
.more-top-title {
	display: flex;
	align-items: center;
	font-size: 32upx;
	font-weight: 500;
	color: #1a1a1a;
}
.more-top-color {
	width: 10upx;
	background: #afdbff;
	border-radius: 20upx;
	height: 30upx;
	margin-right: 10upx;
}
.more-top-more {
	font-size: 26upx;
	color: $uni-text-color-placeholder;
}

.coupon-list {
	width: 100%;
	padding: 54rpx 30rpx 54upx 70rpx;
	padding-top: 0upx;
	box-sizing: border-box;
}

.coupon-item {
	margin-top: 20rpx;
	width: 100%;
	box-shadow: 0 8rpx 10rpx -8rpx #eaeef1;
	border-radius: 2rpx;
}

.coupon {
	height: 160rpx;
	position: relative;
	display: flex;
	align-items: center;
}

.coupon-img {
	width: 100%;
	height: 160rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
.coupon-img-icon {
	width: 80upx;
	height: 80upx;
	position: absolute;
	left: -30upx;
	top: 40upx;
	z-index: 0;
}

.left-tit-box {
	width: 414rpx;
	padding-left: 75rpx;
	box-sizing: border-box;
	z-index: 10;
}

.tit {
	width: 290rpx;
	font-size: 30rpx;
	color: #333;
	line-height: 42rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.term {
	width: 228rpx;
	font-size: 24rpx;
	color: #999;
	line-height: 24rpx;
	padding-top: 7rpx;
	white-space: nowrap;
}

.right-detail {
	width: 236rpx;
	text-align: center;
	height: 160rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.detail-txt {
	font-size: 34rpx;
	color: #fff;
	padding-right: 12rpx;
}

.arrow {
	width: 16rpx;
	height: 24rpx;
	transition: all 0.15s ease;
}

.spread {
	width: 24rpx;
	height: 16rpx;
}

.qrcode {
	width: 260rpx;
	height: 260rpx;
	margin: 45rpx auto 43rpx auto;
}

.hidden-box {
	padding: 35rpx 40rpx 27rpx 40rpx;
	box-sizing: border-box;
	color: #333;
	border-top: 1rpx solid #eaeef1;
	background: #fff;
}

.code-tit {
	font-size: 28rpx;
	line-height: 28rpx;
}

.code-num {
	font-size: 30rpx;
	line-height: 30rpx;
	padding-top: 23rpx;
	font-weight: bold;
}

.qrcode-box {
	width: 100%;
	border-bottom: 1rpx dashed #eaeef1;
	margin-bottom: 6rpx;
}

.list-item {
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
}

.list-item::after {
	left: 0;
}

.item-tit {
	color: #666;
}

.item-con {
	color: #333;
}

.explain {
	font-size: 28rpx;
	line-height: 28rpx;
	color: #666;
	padding: 33rpx 0 25rpx 0;
}

.explain-text {
	font-size: 28rpx;
	line-height: 41rpx;
	color: #333;
}

.none {
	width: 100%;
	position: fixed;
	text-align: center;
	font-size: 30rpx;
	color: #ccc;
	top: 49%;
}
.tui-rotate_90 {
	transform: rotate(90deg);
}
.pink {
	color: #e478ff;
}
</style>
